<template>
  <div class="content-box flex ac">
    <div class="left-box">
      <div class="left-box-top padding18">
        <p class="title-box">经营统计</p>
        <div class="left-box-top-item flex ac fw">
          <div
            class="left-box-top-item-item flex fc jc"
            v-for="(item, index) in 12"
            :key="index"
          >
            <span class="title">总盈利（元）</span>
            <span class="num">12,230.5</span>
          </div>
        </div>
      </div>
      <div class="left-box-center padding18">
        <p class="title-box flex ac jb">
          收益概览
          <span class="tab-box flex ac">
            <span class="tab-item flex ac jc tab-item-active">周</span>
            <span class="tab-item flex ac jc">月</span>
          </span>
        </p>
        <div class="businessTrends-box" ref="businessTrends"></div>
      </div>
      <div class="left-box-bottom padding18 flex ac">
        <div class="left-box-bottom-left">
          <p class="title-box">成功订单金额分布</p>
          <div class="price-box" ref="priceBox"></div>
        </div>
        <div class="left-box-bottom-right">
          <div class="title-box flex ac jb">
            <span class="flex ac">
              收益记录
              <span class="price-tips">【合计收益：1800元】</span>
            </span>
            <div>
              <el-date-picker
                class="picker-width"
                v-model="pickerDateVal"
                type="daterange"
                range-separator="-"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              />
            </div>
          </div>
          <!-- table -->
          <el-table
            :data="tableData"
            class="el-table-box"
            height="calc(100% - 60px)"
            :header-cell-style="{
              background: '#F5F7FA',
              color: '#5C5F66',
              textAlign: 'center',
            }"
            :cell-style="{ textAlign: 'center', color: '#5C5F66' }"
          >
            <el-table-column fixed prop="date" label="时间" />
            <el-table-column prop="name" label="名称" />
            <el-table-column prop="state" label="状态" />
            <el-table-column prop="city" label="城市" />
            <el-table-column prop="address" label="地址" />
            <el-table-column prop="zip" label="编号" />
          </el-table>
        </div>
      </div>
    </div>
    <div class="right-box">
      <div class="right-box-top padding18">
        <p class="title-box">设备统计</p>
        <div class="device-box" ref="deviceBox"></div>
      </div>
      <div class="right-box-bottom padding18">
        <p class="title-box">店铺收益排行</p>
        <div class="scroll-view">
          <div class="item-box flex ac bottom16">
            <div class="left-box-num opacity-0">1</div>
            <div class="right-box flex ac jb">
              <div class="right-box-title">店铺名称</div>
              <div class="right-box-title">实总收益</div>
            </div>
          </div>
          <!-- 列表 -->
          <div
            class="item-box flex ac"
            v-for="(item, index) in 50"
            :key="index"
          >
            <div class="left-box-num">{{ index + 1 }}</div>
            <div class="right-box flex ac jb">
              <div class="right-box-name">金山派出所</div>
              <div class="right-box-num">1098.12</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import {
  onMounted,
  reactive,
  toRefs,
  getCurrentInstance,
  onBeforeUnmount,
  ref,
} from 'vue'
import * as echarts from 'echarts'
const { proxy: that } = getCurrentInstance()
let pickerDateVal = ref('')
let tableData = ref([
  {
    date: '2016-05-03',
    name: 'Tom',
    state: 'California',
    city: 'Los Angeles',
    address: 'No. 189, Grove St, Los Angeles',
    zip: 'CA 90036',
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    state: 'California',
    city: 'Los Angeles',
    address: 'No. 189, Grove St, Los Angeles',
    zip: 'CA 90036',
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    state: 'California',
    city: 'Los Angeles',
    address: 'No. 189, Grove St, Los Angeles',
    zip: 'CA 90036',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    state: 'California',
    city: 'Los Angeles',
    address: 'No. 189, Grove St, Los Angeles',
    zip: 'CA 90036',
  },
  {
    date: '2016-05-08',
    name: 'Tom',
    state: 'California',
    city: 'Los Angeles',
    address: 'No. 189, Grove St, Los Angeles',
    zip: 'CA 90036',
  },
  {
    date: '2016-05-06',
    name: 'Tom',
    state: 'California',
    city: 'Los Angeles',
    address: 'No. 189, Grove St, Los Angeles',
    zip: 'CA 90036',
  },
  {
    date: '2016-05-07',
    name: 'Tom',
    state: 'California',
    city: 'Los Angeles',
    address: 'No. 189, Grove St, Los Angeles',
    zip: 'CA 90036',
  },
])
onMounted(() => {
  console.log('index')
  drawBusinessTrends()
  deviceBox()
  priceBox()
  window.addEventListener('resize', handleResize)
})
onBeforeUnmount(() => {
  window.removeEventListener('resize', handleResize)
})
const handleResize = () => {
  // 在这里根据窗口大小进行操作，例如自动调整内容的大小
  // 你可以设置数据属性来记录窗口的当前状态
  drawBusinessTrendsElement.resize()
  deviceBoxElement.resize()
  priceBoxElement.resize()
}
// 绘制折线图
let drawBusinessTrendsElement = ''
const drawBusinessTrends = () => {
  drawBusinessTrendsElement = echarts.init(that.$refs.businessTrends)
  const option = {
    tooltip: {
      trigger: 'axis',
      backgroundColor: '#fff',
      formatter: function (e) {
        return `${e[0].seriesName}：${e[0].data}元`
      },
    },
    grid: {
      left: '3%', // 调整左边距
      right: '3%', // 调整右边距
      bottom: '3%', // 调整底部边距
      top: '5%', // 调整顶部边距
      containLabel: true, // 确保标签和轴标题被包含在容器内
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月'], // 示例数据
      axisLine: {
        show: true, // 不显示横坐标轴线
        lineStyle: {
          color: '#EDEDED', // 设置X轴颜色为红色
        },
      },
      axisLabel: {
        //x轴文字的配置
        show: true,
        color: '#999999',
      },
      axisTick: {
        show: false, // 不显示刻度线
      },
    },
    yAxis: {
      type: 'value',
      axisLabel: {
        formatter: '{value}',
      },
      axisLine: {
        show: true, // 不显示横坐标轴线
        lineStyle: {
          color: '#EDEDED', // 设置X轴颜色为红色
        },
      },
      axisLabel: {
        //x轴文字的配置
        show: true,
        color: '#999999',
      },
      splitLine: {
        show: true,
        lineStyle: {
          type: 'dashed',
        },
      },
    },
    series: [
      {
        name: '订单金额',
        type: 'line',
        data: [620, 1032, 701, 1234, 890, 1430, 1120], // 示例数据，模拟起伏更大
        smooth: true, // 折线平滑
        lineStyle: {
          width: 2,
          color: 'rgba(59, 117, 255, .6)',
        },
        symbol: 'none',
        // symbolSize: (value, params) => {
        //   // 获取数据系列的长度
        //   const seriesLength = option.series[0].data.length
        //   // 中间节点放大
        //   if (params.dataIndex === Math.floor(seriesLength / 2)) {
        //     return 8 // 中间节点的大小
        //   }
        //   return 8 // 其他节点的大小
        // },
        itemStyle: {
          shadowColor: 'rgba(0, 0, 0, 1)', // 阴影颜色
          shadowBlur: 1, // 阴影的模糊级数
        },
        areaStyle: {
          opacity: 0.1,
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: '#3B75FF',
            },
            {
              offset: 1,
              color: '#fff',
            },
          ]),
        },
        // lineStyle: {
        //   normal: {
        //     shadowColor: 'rgba(0, 0, 0, 1)', // 线的阴影颜色
        //     shadowBlur: 100, // 线的阴影模糊级数
        //     shadowOffsetX: 5, // 线的阴影水平偏移
        //     shadowOffsetY: 5, // 线的阴影垂直偏移
        //   },
        // },
      },
    ],
  }
  drawBusinessTrendsElement.setOption(option)
}
// 设备统计饼图
let deviceBoxElement = ''
const deviceBox = () => {
  deviceBoxElement = echarts.init(that.$refs.deviceBox)
  let data = [
    { value: 1048, name: '在线设备' },
    { value: 735, name: '电池预警' },
    { value: 580, name: '离线设备' },
    { value: 580, name: '满电池' },
    { value: 580, name: '离线预警' },
  ]
  const option = {
    title: {
      text: '111',
      subtext: '总设备',
      left: 'center',
      top: '27%',
      textStyle: {
        fontSize: 30,
      },
      subtextStyle: {
        fontSize: 16,
      },
    },
    tooltip: {
      trigger: 'item',
      formatter(params) {
        return `${params.data.name}：${params.data.value}台`
      },
    },
    legend: {
      icon: 'circle',
      width: '100%',
      itemWidth: 8,
      itemHeight: 8,
      bottom: '0%',
      itemGap: 20, // 控制图例项之间的间隔
      textStyle: {
        color: '#878C9A',
        fontSize: '12',
        padding: 8, // 控制图例项内部的填充
        rich: {
          a: {
            width: 140,
            height: 12,
            backgroundColor: 'transparent', // 一定要设置，不然不生效
            padding: [0, 0, 0, 0],
          },
        },
      },
      formatter: function (name) {
        let index = data.findIndex(item => {
          return item.name == name
        })
        var arr = [
          '{a|' + name + ' ' + data[index].value + '台}',
          // '{b|' + name + '}',
        ]
        return arr.join('\n')
      },
      // formatter: params => {
      //   console.log(params)
      //   return `{a|${params}}`
      // },
    },

    series: [
      {
        type: 'pie',
        center: ['50%', '35%'],
        radius: ['65%', '35%'],
        data,
        itemStyle: {
          color: function (params) {
            // 预定义一个颜色数组
            var colorList = [
              '#7D88FC',
              '#B3CDFF',
              '#52CCA3',
              '#7D8FB3',
              '#2697FF',
            ]
            // 返回每个饼图扇区的颜色
            return colorList[params.dataIndex % colorList.length]
          },
        },
        label: {
          show: false,
        },
      },
    ],
  }
  deviceBoxElement.setOption(option)
}

// 金额饼图
let priceBoxElement = ''
const priceBox = () => {
  priceBoxElement = echarts.init(that.$refs.priceBox)
  const option = {
    // title: {
    //   text: 'Referer of a Website',
    //   subtext: 'Fake Data',
    //   left: 'center',
    // },
    tooltip: {
      trigger: 'item',
      formatter(params) {
        return `[${params.data.name}]：${params.data.value}单`
      },
    },
    legend: {
      orient: 'vertical',
      right: '5%',
      bottom: 'center',
      itemWidth: 8,
      itemHeight: 8,
      icon: 'circle',
      itemGap: 20, // 控制图例项之间的间隔
      textStyle: {
        color: '#878C9A',
        fontSize: '14',
        padding: 8, // 控制图例项内部的填充
      },
    },
    series: [
      {
        // name: 'Access From',
        type: 'pie',
        radius: '65%',
        left: '-25%',
        data: [
          { value: 1048, name: '1.5元-3元' },
          { value: 735, name: '3元-4.5元' },
          { value: 580, name: '4.5元-6元' },
          { value: 484, name: '6元-7.5元' },
          { value: 300, name: '7.5元-30元' },
          { value: 300, name: '99元' },
        ],
        itemStyle: {
          color: function (params) {
            // 预定义一个颜色数组
            var colorList = [
              '#7D88FC',
              '#52CCA3',
              '#2697FF',
              '#B3CDFF',
              '#7D8FB3',
              '#BFB3FF',
            ]
            // 返回每个饼图扇区的颜色
            return colorList[params.dataIndex % colorList.length]
          },
        },
        label: {
          show: false,
        },
      },
    ],
  }
  priceBoxElement.setOption(option)
}

const detail = reactive({
  data: '11',
})
let { data } = toRefs(detail)
</script>
<style scoped lang="scss">
@import './index.scss';
</style>
